import React from 'react'
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'
import { Bar } from 'react-chartjs-2'

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
)

interface BarChartProps {
  data: {
    labels: string[]
    datasets: Array<{
      label: string
      data: number[]
      backgroundColor: string | string[]
      borderColor?: string | string[]
      borderWidth?: number
    }>
  }
  title?: string
  height?: number
  yAxisLabel?: string
  showLegend?: boolean
  horizontal?: boolean
  stacked?: boolean
}

const BarChart: React.FC<BarChartProps> = ({
  data,
  title,
  height = 300,
  yAxisLabel,
  showLegend = true,
  horizontal = false,
  stacked = false
}) => {
  const options = {
    responsive: true,
    maintainAspectRatio: false,
    indexAxis: horizontal ? 'y' as const : 'x' as const,
    plugins: {
      legend: {
        display: showLegend,
        position: 'top' as const,
        labels: {
          usePointStyle: true,
          padding: 20,
          font: {
            size: 12
          }
        }
      },
      title: {
        display: !!title,
        text: title,
        font: {
          size: 16,
          weight: 'bold' as const
        },
        padding: {
          top: 10,
          bottom: 30
        }
      },
      tooltip: {
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        titleColor: '#fff',
        bodyColor: '#fff',
        borderColor: '#ddd',
        borderWidth: 1,
        cornerRadius: 6,
        displayColors: true,
        callbacks: {
          label: function(context: any) {
            let label = context.dataset.label || ''
            if (label) {
              label += ': '
            }
            if (context.parsed.y !== null) {
              const value = horizontal ? context.parsed.x : context.parsed.y
              label += value.toLocaleString()
            }
            return label
          }
        }
      }
    },
    scales: {
      x: {
        display: true,
        stacked: stacked,
        grid: {
          display: true,
          color: 'rgba(0, 0, 0, 0.1)'
        },
        ticks: {
          font: {
            size: 11
          }
        },
        title: {
          display: horizontal && !!yAxisLabel,
          text: horizontal ? yAxisLabel : undefined,
          font: {
            size: 12,
            weight: 'bold' as const
          }
        }
      },
      y: {
        display: true,
        stacked: stacked,
        grid: {
          display: true,
          color: 'rgba(0, 0, 0, 0.1)'
        },
        ticks: {
          font: {
            size: 11
          },
          callback: function(value: any) {
            return value.toLocaleString()
          }
        },
        title: {
          display: !horizontal && !!yAxisLabel,
          text: !horizontal ? yAxisLabel : undefined,
          font: {
            size: 12,
            weight: 'bold' as const
          }
        }
      }
    },
    animation: {
      duration: 750,
      easing: 'easeInOutQuart' as const
    },
    elements: {
      bar: {
        borderRadius: 4,
        borderSkipped: false
      }
    }
  }

  return (
    <div style={{ height: `${height}px`, width: '100%' }}>
      <Bar data={data} options={options} />
    </div>
  )
}

export default BarChart
